<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Layout management</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, layout management, Qyoto, Visual Basic">
<meta name="description" content="Layout management">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Layout management</h1>

<p>
In this part of the Visual Basic Qyoto programming tutorial, we 
will introduce layout managers. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
When we design the GUI of our application, we decide what 
components we will use and how we will organize those components
in the application. To organize our components, we use specialized
non visible objects called layout managers. There are several options in Qyoto.
We can use absolute positioning, built-in layout managers or create a custom layout
manager. We can also visually build the layouts using the Qt Designer. 
</p>

<p>
Qyoto has some important built-in layout managers. The <b class="keyword">QVBoxLayout</b> 
class lines up widgets vertically. <b class="keyword">QHBoxLayout</b> lines up widgets horizontally.
The <b class="keyword">QGridLayout</b> class lays out widgets in a grid. The grid layout is the most
flexible layout manager. The box layouts nest into one another to create complex layouts. 
</p>


<h2>Absolute positioning</h2>

<p>
In most cases, programmers should use layout managers. There are a few 
situations, where we can use absolute positioning. In absolute positioning, 
the programmer specifies the position and the size of each widget in pixels. 
The size and the position of a widget do not change, if you resize a window.
Applications look different on various platforms, and what looks OK on Linux, 
might not look OK on Mac. Changing fonts in your application might spoil the 
layout. If you translate your application into another
language, you must redo your layout. For all these issues, use the absolute 
positioning only when you have a reason to do so.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, we lay out widgets
' using absolute positioning
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Dim bardejov As QPixmap
    Dim rotunda As QPixmap 
    Dim mincol As QPixmap

    Public Sub New()
    
        Me.SetWindowTitle("Absolute")
    
        Me.InitUI()
        
        Me.Resize(300, 280)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        SetStyleSheet("QWidget { background-color: #414141 }")

        Try 
            bardejov = New QPixmap("bardejov.jpg")
            rotunda = New QPixmap("rotunda.jpg")
            mincol = New QPixmap("mincol.jpg")
        Catch e As Exception
            Console.WriteLine(e.Message)
            Environment.Exit(1)
        End Try

        Dim barLabel As New QLabel(Me)
        barLabel.SetPixmap(bardejov)
        barLabel.SetGeometry(20, 20, 120, 90)

        Dim rotLabel As New QLabel(Me)
        rotLabel.SetPixmap(rotunda)
        rotLabel.SetGeometry(40, 160, 120, 90)

        Dim minLabel As New QLabel(Me)
        minLabel.SetPixmap(mincol)
        minLabel.SetGeometry(170, 50, 120, 90)

    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In this example, we show three images using the absolute positioning.
</p>

<pre class="explanation">
Dim barLabel As New QLabel(Me)
barLabel.SetPixmap(bardejov)
</pre>

<p>
The <b class="keyword">QLabel</b> widget is used to hold the image. 
</p>

<pre class="explanation">
barLabel.SetGeometry(20, 20, 120, 90)
</pre>

<p>
We use the <b class="keyword">SetGeometry()</b> method to position the label on the
window at x=20, y=20. The size of the image is 120x90.
</p>

<p>
When we resize the window, the labels retain their initial size. 
</p>

<br>
<img src="/img/gui/vbqyoto/absolute.png" alt="Absolute">
<div class="figure">Figure: Absolute positioning</div>


<h2>Buttons example</h2>

<p>
In the following example, we will position two buttons in the bottom right corner
of the window. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use box layouts
' to position two buttons in the
' bottom right corner of the window
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.SetWindowTitle("Buttons")
    
        Me.InitUI()
        
        Me.Resize(300, 150)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim vbox As New QVBoxLayout(Me)
        Dim hbox As New QHBoxLayout

        Dim ok As New QPushButton("OK", Me)
        Dim apply As New QPushButton("Apply", Me)

        hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)
        hbox.AddWidget(apply)
        
        vbox.AddStretch(1)
        vbox.AddLayout(hbox)

    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
We use nested box layouts to get our intended layout. 
</p>

<pre class="explanation">
Dim vbox As New QVBoxLayout(Me)
Dim hbox As New QHBoxLayout
</pre>

<p>
We use one vertical and one horizontal box. 
</p>

<pre class="explanation">
Dim ok As New QPushButton("OK", Me)
Dim apply As New QPushButton("Apply", Me)
</pre>

<p>
These are the two buttons, that will go into the bottom
right corner of the window. 
</p>

<pre class="explanation">
hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)
</pre>

<p>
We put the ok button into the horizontal box. The second parameter
is the <b class="keyword">stretch</b> factor. It expands the area allotted to the
ok button. It takes all available space left. Inside this area, the button is aligned
to the right. 
</p>

<pre class="explanation">
vbox.AddStretch(1)
</pre>

<p>
This line creates a vertically expanded white space, which will push the horizontal
box with the buttons to the bottom. 
</p>

<pre class="explanation">
vbox.AddLayout(hbox)
</pre>

<p>
The horizontal box is nested into the vertical box. 
</p>

<br>
<img src="/img/gui/vbqyoto/buttons.png" alt="Buttons example">
<div class="figure">Figure: Buttons example</div>


<h2>Windows example</h2>

<p>
The following is a more complicated example with nested box layouts.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use box layouts
' to create a windows example
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.SetWindowTitle("Windows")
    
        Me.InitUI()
        
        Me.Resize(350, 300)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim vbox As New QVBoxLayout(Me)

        Dim vbox1 As New QVBoxLayout
        Dim hbox1 As New QHBoxLayout
        Dim hbox2 As New QHBoxLayout

        Dim windLabel As New QLabel("Windows", Me)
        Dim edit As New QTextEdit(Me)
        edit.SetEnabled(False)

        Dim activate As New QPushButton("Activate", Me)
        Dim close As New QPushButton("Close", Me)
        Dim help As New QPushButton("Help", Me)
        Dim ok As New QPushButton("OK", Me)

        vbox.AddWidget(windLabel)

        vbox1.AddWidget(activate)
        vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
        hbox1.AddWidget(edit)
        hbox1.AddLayout(vbox1)

        vbox.AddLayout(hbox1)

        hbox2.AddWidget(help)
        hbox2.AddStretch(1)
        hbox2.AddWidget(ok)
        
        vbox.AddLayout(hbox2, 1)

    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In this layout, we use two vertical and horizontal boxes. 
</p>

<pre class="explanation">
Dim vbox As New QVBoxLayout(Me)
</pre>

<p>
This is the base layout of the example. 
</p>

<pre class="explanation">
vbox.AddWidget(windLabel)
</pre>

<p>
First goes the label widget. It goes simply to the top of the
vertical box. 
</p>

<pre class="explanation">
vbox1.AddWidget(activate)
vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
hbox1.AddWidget(edit)
hbox1.AddLayout(vbox1)

vbox.AddLayout(hbox1)
</pre>

<p>
In the center part of the window we have a text edit widget and
two vertically lined up buttons. The buttons go into a vertical box. The
buttons are aligned to the top within this vertical box. The vertical box
and the text edit go into a horizontal box. This horizontal box goes to the base
vertical box, just below the label widget. 
</p>

<pre class="explanation">
hbox2.AddWidget(help)
hbox2.AddStretch(1)
hbox2.AddWidget(ok)

vbox.AddLayout(hbox2, 1)
</pre>

<p>
The help and the ok button go into another horizontal box. There is 
an expanded white space between these two buttons. Again, the horizontal box
goes to the base vertical box. 
</p>


<br>
<img src="/img/gui/vbqyoto/windows.png" alt="Windows example">
<div class="figure">Figure: Windows example</div>



<h2>New Folder example</h2>

<p>
In the last example, we use the <b class="keyword">QGridLayout</b> manager to 
create a New Folder layout example.  
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, use the QGridLayout
' to create a New Folder example
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.SetWindowTitle("New Folder")
    
        Me.InitUI()
        
        Me.Resize(350, 300)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim grid As New QGridLayout(Me)

        Dim nameLabel As New QLabel("Name", Me)
        Dim nameEdit As New QLineEdit(Me)
        Dim text As New QTextEdit(Me)
        Dim okButton As New QPushButton("OK", Me)
        Dim closeButton As New QPushButton("Close", Me)

        grid.AddWidget(nameLabel, 0, 0)
        grid.AddWidget(nameEdit, 0, 1, 1, 3)
        grid.AddWidget(text, 1, 0, 2, 4)
        grid.SetColumnStretch(1, 1)
        grid.AddWidget(okButton, 4, 2)
        grid.AddWidget(closeButton, 4, 3)

    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our example, we have one label, one line edit, one text edit and two buttons. 
</p>

<pre class="explanation">
Dim grid As New QGridLayout(Me)
</pre>

<p>
We create an instance of the <b class="keyword">QGridLayout</b> manager. 
</p>

<pre class="explanation">
grid.AddWidget(nameLabel, 0, 0)
</pre>

<p>
We place the label widget in the first cell of the grid. The cells count from 0. 
The last two parameters are the row and column number. 
</p>

<pre class="explanation">
grid.AddWidget(nameEdit, 0, 1, 1, 3)
</pre>

<p>
The line edit widget is placed at the first row, second column. 
The last two parameters are the row span and the column span. Horizontally, the
widget will span three columns. 
</p>

<pre class="explanation">
grid.SetColumnStretch(1, 1)
</pre>

<p>
The parameters of the method are the column number and the stretch factor.
Here we set stretch factor 1 to the second column. This means, that this column will take
all remaining space. This was set, because we wanted our buttons to retain their initial size. 
</p>


<br>
<img src="/img/gui/vbqyoto/newfolder.png" alt="New Folder example">
<div class="figure">Figure: New Folder example</div>

<hr class="btm">

<p>
In this part of the Visual Basic Qyoto tutorial, we mentioned layout management of widgets. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 17, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

